<template>
  <div class="favorite-module">
    <div class="module-header">
      <h3 class="module-title">我的关注 27</h3>
      <div class="view-all">
        <i class="fa fa-angle-right"></i>
      </div>
    </div>

    <div class="favorite-list">
      <div class="favorite-item">
        <div class="store-logo food-box"></div>
        <div class="store-info">
          <div class="store-name">盖食英雄·老饭盒(永旺店)</div>
        </div>
      </div>

      <div class="favorite-item">
        <div class="store-logo hotpot"></div>
        <div class="store-info">
          <div class="store-name">川唐麻辣香锅(天南大店)</div>
          <div class="visit-count">点过27次</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 这里可以添加获取用户关注列表的逻辑
</script>

<style scoped>
.favorite-module {
  background-color: white;
  margin: 15px;
  border-radius: 8px;
  padding: 15px;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.module-title {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.view-all {
  font-size: 12px;
  color: #999;
}

.favorite-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.favorite-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.store-logo {
  width: 50px;
  height: 50px;
  border-radius: 6px;
  background-color: #f5f5f5;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.food-box {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23ff6b6b" d="M481.9 270.1C490.9 279.1 496 291.3 496 304C496 330.5 474.5 352 448 352H64c-26.5 0-48-21.5-48-48c0-12.7 5.1-24.9 14.1-33.9L218.6 81.6c11.8-11.8 27.8-18.5 44.4-18.5c16.7 0 32.6 6.6 44.4 18.5l174.6 188.4zM248 128c-13.3 0-24 10.7-24 24v48h-48c-13.3 0-24 10.7-24 24s10.7 24 24 24h48v48c0 13.3 10.7 24 24 24s24-10.7 24-24V248h48c13.3 0 24-10.7 24-24s-10.7-24-24-24H272V152c0-13.3-10.7-24-24-24z"/></svg>');
}

.hotpot {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="%23ff6b6b" d="M320 192c-44.2 0-80-35.8-80-80s35.8-80 80-80s80 35.8 80 80s-35.8 80-80 80zM368 384c0 44.2-35.8 80-80 80s-80-35.8-80-80s35.8-80 80-80s80 35.8 80 80zM144 112c0-8.8 7.2-16 16-16s16 7.2 16 16c0 50.6 41.4 92 92 92h8c50.6 0 92-41.4 92-92c0-8.8 7.2-16 16-16s16 7.2 16 16c0 68.3-55.7 124-124 124h-8c-68.3 0-124-55.7-124-124zm16 288c-8.8 0-16-7.2-16-16c0-50.6 41.4-92 92-92h8c50.6 0 92 41.4 92 92c0 8.8-7.2 16-16 16s-16-7.2-16-16c0-33.1-26.9-60-60-60h-8c-33.1 0-60 26.9-60 60c0 8.8-7.2 16-16 16zM39 39c-9.4 9.4-9.4 24.6 0 33.9L207 233c6.2 6.2 16.4 6.2 22.6 0s6.2-16.4 0-22.6L73 54.4c-9.4-9.4-24.6-9.4-33.9 0zM600.1 473c9.4-9.4 9.4-24.6 0-33.9L433 279c-6.2-6.2-16.4-6.2-22.6 0s-6.2 16.4 0 22.6L567 457.7c9.4 9.4 24.6 9.4 33.9 0l-.9 15.3z"/></svg>');
}

.store-info {
  flex: 1;
}

.store-name {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 4px;
}

.visit-count {
  font-size: 12px;
  color: #999;
}
</style> 